<template>
      <div id="facepay">
            <div class="container">
                  <div class="title">
                        刷脸支付“扑面而来”
                  </div>
                  <div class="iconbox">
                        <div class="item" v-for="(item, index) in list" :key="index">
                              <div class="name">{{ item.name }}</div>
                              <div class="imgbox">
                                    <img :src="item.image" alt="">
                              </div>
                              <div class="txt">{{ item.txt }}</div>
                        </div>
                  </div>
            </div>
      </div>
</template>

<script>
      export default {
            data() {
                  return {
                        list: [
                              {
                                    name:"1.0时代",
                                    image: require("../../assets/img/a1.png"),
                                    txt: "现金支付"
                              },
                              {
                                    name:"2.0时代",
                                    image: require("../../assets/img/a2.png"),
                                    txt: "刷卡支付"
                              },
                              {
                                    name:"3.0时代",
                                    image: require("../../assets/img/a3.png"),
                                    txt: "扫码支付"
                              },
                              {
                                    name:"4.0时代",
                                    image: require("../../assets/img/a4.png"),
                                    txt: "刷脸支付"
                              },
                        ]
                  }
            },
      }
</script>

<style lang="scss" scoped>
#facepay {
      width: 100%;
      margin-top: 0.4rem;
      max-width: 750px;
      .container {
            width: 100%;
            .title {
                  width: 100%;
                  text-align: center;
                  font-size: 0.36rem;
            }
            .iconbox {
                  font-size: 0.2rem;
                  text-align: center;
                  padding: 0 0.4rem;
                  display: flex;
                  flex-wrap: wrap;
                  padding-top: 0.3rem;
                  .item {
                        width: 3.3rem;
                        text-align: center;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        margin: 0.2rem 0;
                        .name {
                              color: #228FE5;
                        }
                        .imgbox {
                              width: 1.2rem;
                              height: 1.2rem;
                              overflow: hidden;
                              margin: 0.3rem 0;
                              img {
                                    width: 1.2rem;
                                    height: 1.2rem;
                                    display: block;
                              }
                        }
                  }
            }
      }
}
</style>